<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>通过css滚动元素，通过左右键滚动</title>
	</head>

	<body>
		<!-- https://www.cnblogs.com/coco1s/p/11993942.html -->

		<!--  scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]? -->
		<!--  scroll-snap-align 
            统一滚动元素设置 start center end，每次滚动后，元素在盒子里的位置
            也可以单独设置，单独设置时前后元素如果不设置，会出现无法停留的现象
    -->
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>

		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				margin: 0 auto;
				width: 800px;
				white-space: nowrap;
				overflow: auto;
				/* x 轴方向上的滚动，mandatory 表示强制将滚动结束后元素的停留位置设置到我们规定的地方。 */
				scroll-snap-type: x mandatory;
			}

			li {
				display: inline-block;
				height: 500px;
				width: 500px;
				list-style: none;
				scroll-snap-align: start;
			}

			li:nth-child(1) {
				background: pink;
				/* scroll-snap-align: start; */
			}

			li:nth-child(2) {
				background: teal;
				/* scroll-snap-align: start; */
			}

			li:nth-child(3) {
				background: hotpink;
				/* scroll-snap-align: center; */
			}

			li:nth-child(4) {
				background: yellow;
				/* scroll-snap-align: end; */
			}

			li:nth-child(5) {
				background: rebeccapurple;
			}
		</style>
	</body>
</html>
